<template>
    <div class="page-box">
        <div class="page-search">

            <div>
                <label>单据查询</label>
                <el-input v-model="searchForm.Number" style="width: 160px;"></el-input>
            </div>

            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>

        </div>
        <div class="page-section">

            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="Number" label="销售单编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerName" label="客户名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerContact" label="联系人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerContactTel" label="联系状态" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="订单状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.Status === 0">待审核</el-tag>
                        <el-tag type="success" v-else-if="scope.row.Status === 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.Status === 2">已退货</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="DeliveryDate" label="出库日期" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WarehouseName" label="出货仓" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Price" label="总价" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                        
                        <el-button type="text" @click="checked(scope.row)">确认选择</el-button>
                    </template>
                </el-table-column>


            </el-table>

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />

        </div>

        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="65%" >
           
            <OrderSalesExWarehouseDetails :model="model" :isUpdate="isUpdate"
                v-if="dialogDomain.dialogVisible" />
        </el-dialog>

    </div>
</template>



<script>
import Pagination from '@/components/Pagination.vue';
import OrderSalesExWarehouseDetails from './OrderSalesExWarehouseDetails.vue'

export default {
    components: {
        Pagination,
        OrderSalesExWarehouseDetails
    },
    mounted() {
        this.dataBind();

    },
    data() {
        return {
            ClientList: [],
            WarehouseList: [],
            searchForm: {
                Number: '',
            },
            dialogDomain: {
                title: '销售出库订单明细',
                dialogVisible: false,
                dialogType: 0

            },
            isUpdate: false,
            //数据模型
            model: {},
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false
        }
    },
    created() {
        this.GetOrderQuoteSelectData();
    },
    methods: {
        details(model) {
            this.dialogDomain.title = "销售出库明细";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
            this.model = model;
        },

        CustomerChange(model) {
            this.model.CustomerNumber = model.Id;
            this.model.CustomerName = model.ClientName;
            console.log(model)
        },
        WarehouseChange(model) {
            this.model.WarehouseId = model.Id;
            this.model.WarehouseName = model.WarehouseName;
            console.log(model)
        },

        checked(model) {
            this.$http.get('/api/OrderSalesExWarehouse/GetItem',{
                params:{
                    OrderSalesExWarehouseId:model.Id,
                    WarehouseId:model.WarehouseId,
                }
            })
            .then(res => {
                this.$emit('callback',model,res.Data);
            })
        },


        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.Number = '';
        },
      
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/OrderSalesExWarehouse',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        Number: this.searchForm.Number,
                        Status:1,
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },

        GetOrderQuoteSelectData() {
            this.$http.get('./api/Integrated/GetOrderQuoteSelectData')
                .then(res => {
                    this.ClientList = res.Data.ClientList;
                    this.WarehouseList = res.Data.WarehouseList;
                })

        },

        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },


    }

}
</script>

<style></style>